// AuthCodeModal.tsx
import { useState, useEffect } from "react"
import { Modal, View, TouchableOpacity, ViewStyle, TextStyle } from "react-native"
import Clipboard from "@react-native-clipboard/clipboard"
import * as Burnt from "burnt"

import { Text, TextField } from "@/components"

interface Props {
  show: boolean
  title?: string
  isNumber?: boolean
  copyText?: boolean
  copyContent?: string
  onConfirm: (text: string, numOrEmpty: string) => void
  onCancel: () => void
}

const AuthCodeModal: React.FC<Props> = ({
  show,
  title,
  isNumber = false,
  copyText = false,
  copyContent = "",
  onConfirm,
  onCancel,
}) => {
  const [inputValue, setInputValue] = useState<string>("")
  const [inputNumberValue, setInputNumberValue] = useState<string>("")

  useEffect(() => {
    console.log("show", show)
    if (show) {
      setInputValue("")
      setInputNumberValue("")
    }
  }, [show])

  const handleCopy = (): void => {
    Clipboard.setString(copyContent)
    Burnt.toast({
      title: "Copy succeeded, you can now paste it",
    })
    setTimeout(() => {
      onConfirm("", "")
    }, 2000)
  }

  return (
    <Modal visible={show} transparent animationType="fade">
      <View style={$overlay}>
        <View style={$modalBox}>
          {title != null && <Text style={$title}>{title}</Text>}

          {isNumber ? (
            // <TextInput
            //   style={$input}
            //   placeholder="请输入数字"
            //   keyboardType="numeric"
            //   value={inputNumberValue}
            //   onChangeText={setInputNumberValue}
            //   placeholderTextColor="#ffffff80"
            // />
            <View>
              <Text tx={"pay:AuthCodeModelNumberText"}></Text>
            </View>
          ) : copyText ? (
            <View style={$copyContainer}>
              <Text style={$copyText} numberOfLines={3}>
                {copyContent}
              </Text>
            </View>
          ) : (
            <TextField
              style={$input}
              placeholder="请输入文本"
              value={inputValue}
              onChangeText={setInputValue}
              placeholderTextColor="#ffffff80"
            />
          )}

          {!copyText ? (
            <View style={$buttonRow}>
              <TouchableOpacity style={$cancelButton} onPress={onCancel}>
                <Text style={[$buttonText, {}]}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={$confirmButton}
                onPress={() => onConfirm(inputValue, inputNumberValue)}
              >
                <Text style={[$buttonText, {}]}>OK</Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View style={$buttonRow}>
              <TouchableOpacity style={[$confirmButton, $copyConfirmButton]} onPress={handleCopy}>
                <Text style={[$buttonText, {}]}>Copy</Text>
              </TouchableOpacity>
            </View>
          )}
        </View>
      </View>
    </Modal>
  )
}

export default AuthCodeModal

// ---------------------------
// 样式常量（放在文件底部）
// ---------------------------

const $overlay: ViewStyle = {
  flex: 1,
  backgroundColor: "rgba(0, 0, 0, 0.5)",
  alignItems: "center",
  justifyContent: "center",
}

const $modalBox: ViewStyle = {
  width: "80%",
  backgroundColor: "rgba(0, 0, 0, 0.9)",
  borderRadius: 8,
  padding: 20,
}

const $title: TextStyle = {
  fontSize: 18,
  fontWeight: "600",
  textAlign: "center",
  marginBottom: 15,
  color: "#FFFFFF",
}

const $input: TextStyle = {
  width: "100%",
  height: 40,
  borderWidth: 1,
  borderColor: "#CCCCCC",
  borderRadius: 4,
  paddingHorizontal: 10,
  marginBottom: 12,
  color: "#FFFFFF",
}

const $copyContainer: ViewStyle = {
  alignItems: "center",
  paddingVertical: 10,
}

const $copyText: TextStyle = {
  color: "#FFFFFF",
  textAlign: "center",
  height: 60,
  lineHeight: 20,
}

const $buttonRow: ViewStyle = {
  flexDirection: "row",
  justifyContent: "flex-end",
  marginTop: 10,
}

const $confirmButton: ViewStyle = {
  backgroundColor: "#00FFD4",
  justifyContent: "center",
  alignItems: "center",
  height: 32,
  width: "45%",
  borderRadius: 4,
}

const $copyConfirmButton: ViewStyle = {
  width: "100%",
}

const $cancelButton: ViewStyle = {
  justifyContent: "center",
  alignItems: "center",
  height: 32,
  width: "45%",
  borderRadius: 4,
  marginRight: 10,
}

const $buttonText: TextStyle = {
  fontSize: 14,
}
